﻿<!DOCTYPE html>
<html>
<head>
    <title>showhide-rules Documentation</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src="jquery.showhide-rules-1.0.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //For each child, define the parent rules
            var rules = [
                    ['child1', 'parent1'], //checkbox parent
                    ['child2', 'parent1-AND-parent2'], //AND rule
                    ['child3', 'parent1 parent2'], //OR rule
                    ['child4', 'parent1-AND-parent3 parent2'], //AND and OR rules
                    ['child5', 'NOT-parent1'], //negative relationship
                    ['child6', 'parent4'], //radio parent
                    ['child7', 'parent5'], //radio parent
                    ['child8', 'parent6-VAL-foo'], //select parent
                    ['child9', 'parent6-VAL-bar'], //select parent
                    ['child10', 'parent6-VAL-hello parent6-VAL-world'], //select w/ OR
                    ['child11', 'NOT-parent6-VAL-world'] //select w/ negative
                ];
            //Apply the rules
            $('#rules').showhide({
                'rules': rules
            });
            $('#inline').showhide({
                'inline' : true
            });
        });
    </script>
    <style>
        div { background-color:#eee; border:1px solid #aaa; margin:1px }
        code { background-color:#E0F8E0; }
        code span { display:block; }
        code span.t1 { margin-left:2em; }
        code span.t2 { margin-left:4em; }
        code span.t3 { margin-left:6em; }
        code span.t4 { margin-left:8em; }
        code span.t5 { margin-left:10em; } 
    </style>
</head>
<body>
    <form id="intro">
        <h2>Usage</h2>
        <div><code style="background:none;">
        <span>&lt;html&gt;</span>
            <span class="t1">&lt;head&gt;</span>
                <span class="t2">&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"&gt;&lt;/script&gt;</span>
                <span class="t2">&lt;script type="text/javascript" src="jquery.showhide-rules.js"&gt;&lt;/script&gt;</span>
                <span class="t2">&lt;script type="text/javascript"&gt;</span>
                    <span class="t3">$(document).ready(function () {</span>
                        <span class="t4">$('body').showhide({</span>
                            <span class="t5">'inline' : true</span>
                        <span class="t4">});</span>
                    <span class="t3">});</span>
                <span class="t2">&lt;/script&gt;</span>
            <span class="t1">&lt;/head&gt;</span>
            <span class="t1">&lt;body&gt;</span>
                <span class="t2">&lt;input id="myParent" type="checkbox" /&gt;&lt;label for="myParent"&gt;My Parent&lt;/label&gt;</span>
                <span class="t2">&lt;div id="myChild" class="sh-child" data-showhide='{ "dependencies": "myParent" }'&gt;</span>
                    <span class="t3">My Child is shown when My Parent is checked.</span>
                <span class="t2">&lt;/div&gt;</span>
            <span class="t1">&lt;/body&gt;</span>
        <span>&lt;/html&gt;</span>
        </code></div>
    </form>
    <form id="inline">
        <h2>Option 1: Inline Declaration</h2>
        <input id="parent0" type="checkbox" /><label for="parent0">Parent 0</label>
        <div id="child0" class="sh-child" data-showhide='{ "dependencies": "parent0" }'>Child 0 is shown when Parent 0 is checked using an <strong>inline declaration</strong>.</div>
        <p>On any child element, give the element an id and set <code>class="sh-child"</code> and <code>data-showhide='{ "dependencies": "putYourParentRulesHere" }'</code> where <code>putYourParentRulesHere</code> is the parent id statements.</p>
        <code>&lt;div id="child0" class="sh-child" data-showhide='{ "dependencies": "parent0" }'&gt;...&lt;/div&gt;</code>
    </form>
    <hr />
    <form id="rules">
        <h2>Option 2: JavaScript Array Declaration</h2>
        <p>Alternatively, create a JavaScript array of child-parent relationships. For each child id, assign the parent id statement.  Other than the ids, no additional markup is needed.<br />
            <code>var rules = [ ['childId', 'parentId'] ];</code><br/>
            <code>$('body').showhide({ 'rules': rules });</code>
        </p>
        <p>Note: Both declaration types are allowed to be used at the same time, meaning some declarations can be in an array and some inline within the same scope.</p>
        <hr />
        <h2>Parent ID Statements - Dependencies</h2>
        <ul>
            <li><code>parentId1</code> (child is dependent on one parent)</li>
            <li><code>parentId1-AND-parentId2</code> (AND - child is dependent on both parents)</li>
            <li><code>parentId1 parentId2</code> (OR - child is dependent on either parent)</li>
            <li><code>parentId1-AND-parentId2 parentId3</code> (AND and OR - multiple conditions)</li>
            <li><code>NOT-parentId1</code> (NOT - negative relationship)</li>
            <li><code>parentId1-VAL-foo</code> (VAL - for dropdown value, i.e. if the value of parentId1=foo)</li>
        </ul>
        <hr />
        <h2>Checkboxes Example</h2>
        <input id="parent1" type="checkbox" /><label for="parent1">Parent 1</label>
        <input id="parent2" type="checkbox" /><label for="parent2">Parent 2</label>
        <input id="parent3" type="checkbox" /><label for="parent3">Parent 3</label>
        <div id="child1">Child 1 is shown when Parent 1 is checked.</div>
        <div id="child2">Child 2 is shown when Parent 1 <strong>and</strong> Parent 2 are both checked.</div>
        <div id="child3">Child 3 is shown when either Parent 1 <strong>or</strong> Parent 2 is checked.</div>
        <div id="child4">Child 4 is shown when Parent 1 <strong>and</strong> Parent 3 are both checked <strong>or</strong> Parent 2 is checked.</div>
        <div id="child5">Child 5 is shown when Parent 1 <strong>is not</strong> checked.</div>
        <ul>
            <li><code>'child1', 'parent1' //checkbox parent</code></li>
            <li><code>'child2', 'parent1-AND-parent2' //AND rule</code></li>
            <li><code>'child3', 'parent1 parent2' //OR rule</code></li>
            <li><code>'child4', 'parent1-AND-parent3 parent2' //AND and OR rules</code></li>
            <li><code>'child5', 'NOT-parent1' //negative relationship</code></li>
        </ul>
        <hr />
        <h2>Radio Buttons Example</h2>
        <input id="parent4" type="radio" name="radioGroup" checked="checked" /><label for="parent4">Parent 4</label>
        <input id="parent5" type="radio" name="radioGroup" /><label for="parent5">Parent 5</label>
        <div id="child6">Child 6 is shown when Parent 4 is selected.</div>
        <div id="child7">Child 7 is shown when Parent 5 is selected.</div>
        <ul>
            <li><code>child6', 'parent4'</code></li>
            <li><code>child7', 'parent5'</code></li>
        </ul>
        <hr />
        <h2>Dropdowns (&lt;select&gt;) Example</h2>
        <label for="parent6">Parent 6</label>
        <select id="parent6">
            <option value="foo">Foo</option>
            <option value="bar">Bar</option>
            <option value="hello">Hello</option>
            <option value="world">World</option>
        </select>
        <div id="child8">Child 8 is shown when Parent 6 -> Foo is selected.</div>
        <div id="child9">Child 9 is shown when Parent 6 -> Bar is selected.</div>
        <div id="child10">Child 10 is shown when Parent 6 -> Hello <strong>or</strong> World is selected.</div>
        <div id="child11">Child 11 is shown when Parent 6 -> World <strong>is not</strong> selected.</div>
        <ul>
            <li><code>['child8', 'parent6-VAL-foo'], //select parent</code></li>
            <li><code>['child9', 'parent6-VAL-bar'], //select parent</code></li>
            <li><code>['child10', 'parent6-VAL-hello parent6-VAL-world'], //select w/ OR</code></li>
            <li><code>['child11', 'NOT-parent6-VAL-world'] //select w/ negative</code></li>
        </ul>
    </form>
</body>
</html>
